<template>
	<view class="container">
		<!-- top -->
		<view class="top-bg">
			<view class="top-user">
				<image :src="currentLogo" class="user-logo" mode="widthFix"></image>
				<view class="top-level-name font-hyykhw">{{levelName}}</view>
			</view>
		</view>
		<view class="user-info">
			<view style="text-align: center;height: 30px;line-height: 30px;padding-top: 10px;">
				<image src="/static/images/tl.png" class="wang-l"> </image>
				<view class="user-level">{{levelName}}特权</view>
				<image src="/static/images/tr.png" class="wang-r"></image>
			</view>
			<view class="li-body">
				<view class="li-item">
					<p style="text-align: center;">
						<image src="/static/images/icon/rw.png" style="width: 40px;height: 40px; margin: 10px auto;position: relative;">
						</image>
					</p>
					<p>每日任务：{{times}}次</p>
				</view>
				<view class="li-item">
					<p>
						<image src="/static/images/icon/yx.png" style="width: 40px;height: 40px; margin: 10px auto;position: relative;">
					</p>
					<p>有效期：永久</p>
				</view>
			</view>
		</view>
		<view class="body-list">
			<view class="level-list ll-body" v-for="(item,index) in levels" :key="index">
				<view class="ll-item" style="padding-left:25%;">
					<image class="level-logo" v-if="item.icon" :src="item.icon" mode="widthFix"></image>
					<view class="ll-info">
						<image :src="item.levelName" mode="widthFix" style="width: 60px;"></image>
						<text class="font-price">
							{{item.price|currency('')}}</text>
					</view>
					<view v-if="item.isVip" class="ll-info" style="height: 20px;">
						<image mode="widthFix" style="width: 80px;" src="/static/images/level/tq.jpg"></image>
					</view>
					<view class="ll-info">
						每日可领{{item.taskNumber}}次任务
					</view>
				</view>
				<view class="ll-item now-join">
					<text class="join" @tap="openBuy(item)" v-if="isBuy(item)">立即加入</text>
					<text class="join" v-if="!isBuy(item)">已领取</text>
				</view>
			</view>
		</view>
		<u-modal v-model="show" content="确定购买？" :show-title="false" :show-cancel-button="true" @confirm="buyLevel"></u-modal>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				levelName:'游侠',
				currentLogo: '/static/images/level/big/1.png',
				maxId: 1,
				times: 0,
				levels: [],
				memberLevels: [],
				show: false,
				okid: ""
			};
		},
		onShow() {
			this.times = 0;
			this.loadData();
		},
		computed: {
			number() {
				let n = 3;
				for (let l of this.memberLevels) {
					n = n + l.taskNumber;
				}
				return n;
			}
		},
		methods: {
			loadData() {
				let self = this;
				this.$request.post("/getLevel", {
						dataType: 'json',
						responseType: 'text'
					})
					.then(res => {

						this.levels = res.data.json.levels;
						this.memberLevels = res.data.json.memberLevels;
						//TODO 临时处理
						for (let i of this.levels) {
							i.icon = '/static/images/level/big/' + i.id + '.png';
							i.levelName = '/static/images/level/' + i.id + '.jpg';
						}

						for (let s of this.memberLevels) {
							self.times += s.taskNumber;
							self.maxId = s.id;
							self.levelName = s.name;
						}

						if(self.times == 0){
							self.times = 3;
						}

						self.currentLogo = '/static/images/level/big/' + self.maxId + '.png';

					})
					.catch(error => {});
			},
			isBuy(target) {
				for (let s of this.memberLevels) {
					if (s.id == target.id) {
						return false;
					}
				}
				return true;
			},
			openBuy(target) {
				this.show = true;
				this.okid = target.id;
			},
			buyLevel() {
				uni.showLoading({
					title: "购买中",
					mask: true
				})
				this.$request.post("/level/buy", {
						data: {
							id: this.okid
						},
						dataType: 'json',
						responseType: 'text'
					})
					.then(res => {
						uni.hideLoading();
						this.$api.msg("购买成功");
						this.show = false;
						this.loadData();
					})
					.catch(error => {
						uni.hideLoading();
					});
			}
		}
	}
</script>

<style lang="scss">
	.font-price{
		color: #e8ae30;
		font-size: 17px;
		position: absolute;
		padding-left: 15px;
		padding-top: 2px;
		font-weight: bold;
		font-family: '微软雅黑';
		letter-spacing: -1px;
	}
	page {
		background-color: #f4f8fb;
	}

	//top
	.container {
		.top-bg {
			height: 460rpx;
			background: #26232e;
			background-size: cover;
		}
	}
	.user-info {
		z-index: 5;
		margin: -100rpx auto 20px;
		width: 95%;
		border-radius: 10px;
		/*height: 150px;*/
		background-color: #f9a551;
		/* 浏览器不支持时显示 */
		background-image: linear-gradient(90deg, #f9a551, #f4cd80);
		color: #fff;
		font-size: 16px;
		.wang-l{
			height: 30px;
			width: 30px;
			position: static;
			margin-right: 5px;
		}
		.wang-r{
			height: 30px;
			width: 30px;
			position: static;
			margin-left: 5px;
		}
		.user-level{
			display: inline-block;
			position: relative;
			top: -9px;
			font-weight: bold;
			font-size: 18px;
		}
	}
	.li-body {
		display: flex;
		text-align: center;

		.li-item {
			flex: 1;

			p {
				height: 50px;
				line-height: 50px;
			}
		}
	}

	.top-bg {
		z-index: 1;

		image {
			z-index: 0;
			width: 100%;
		}
		.top-user{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.top-level-name{
			color: #fff;
			font-size: 40rpx;
			opacity: 0.9;
		}
		.user-logo {
			width: 260rpx;
			height: 260rpx;
		}

	}

	.level-info {
		position: relative;
		z-index: 5;
		margin: 20px auto;
		width: 90%;
		border-radius: 10px;
		height: 150px;
		background-color: #d0893b;
		/* 浏览器不支持时显示 */
		background-image: linear-gradient(90deg, #d0893b, #f4cd80);
		color: #fff;
		font-size: 16px;

		.title {
			font-weight: 600;
			height: 40px;
			line-height: 40px;
			text-align: center;
		}



	}

	.body-list {
		overflow-y: auto;

		.level-list {
			background-color: #fff;
			border-radius: 6px;
			margin: 20rpx;

		}

		.ll-body {
			display: flex;
			text-align: center;
			align-items: flex-start;

			.ll-item {
				position: relative;
				flex: 1;
				padding: 10px 0;

				.level-logo {
					width: 50px;
					left: 10%;
					top: -2px;
					position: absolute;
				}

				.ll-info {
					text-align: left;
					height: 30px;
					line-height: 30px;
				}

				.join {
					margin-top: 30rpx;
					border-radius: 5px;
					padding: 7px 8px;
					color: #fff;
					background-color: #f9bb40;
					/* 浏览器不支持时显示 */
					background-image: linear-gradient(90deg, #f9bb40, #fce083);
				}
			}
			.now-join{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding-right: 15px;
			}
		}
	}
</style>
